<template>
    <div>
        <el-dialog
            title="变更记录"
            :visible.sync="dialogVisible"
            width="30%"
            center
        >
            <div class="record-list">
                <div class="record-item" @click="openTelDialog">
                    <span>手机号记录</span>
                    <i class="el-icon-arrow-right"></i>
                </div>
                <div class="record-item" @click="openRegisterDialog">
                    <span>等级变更记录</span>
                    <i class="el-icon-arrow-right"></i>
                </div>
                <div class="record-item" @click="openAuthDialog">
                    <span>实名认证记录</span>
                    <i class="el-icon-arrow-right"></i>
                </div>
            </div>
        </el-dialog>

        <tel-dialog ref="telDialog"></tel-dialog>
        <change-level-dialog ref="levelDialog"></change-level-dialog>
        <sure-man-dialog ref="sureManDialog"></sure-man-dialog>
    </div>
</template>
<script>
import TelDialog from './tel.vue'
import SureManDialog from './sureMan.vue'
import changeLevelDialog from './level.vue'

export default {
  name: 'ChangeRecord',
  components: {
    TelDialog,
    SureManDialog,
      changeLevelDialog
  },
  data() {
    return {
      dialogVisible: false,
      userId: null
    }
  },
  methods: {
    openDialog(userId) {
      this.userId = userId
      this.dialogVisible = true
    },
    openTelDialog() {
      this.$refs.telDialog.openDialog(this.userId)
    },
    openRegisterDialog() {
      this.$refs.levelDialog.openDialog(this.userId)
    },
    openAuthDialog() {
      this.$refs.sureManDialog.openDialog(this.userId)
    }
  }
}
</script>

<style scoped lang="less">
.record-list {
  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #EBEEF5;
    cursor: pointer;

    &:hover {
      background-color: #F5F7FA;
    }

    &:last-child {
      border-bottom: none;
    }

    span {
      font-size: 14px;
      color: #606266;
    }

    i {
      color: #909399;
    }
  }
}
</style>
